import React from 'react';

import { Menu, Dropdown, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';


function Operation({ options, onOpera }) {

    const menu = (
        <Menu onClick={onOpera}>
            {
                options.map((item, i) => (
                    <Menu.Item key={item.key}>
                        {
                            item.isGrey? <span style={{cursor: 'pointer', textAlign: 'center', display: 'block'}}>{item.icon}{item.name}</span> :
                                <Button type="link">{item.icon}{item.name}</Button>
                        }
                    </Menu.Item>
                ))
            }
        </Menu>
    );

    return (
        <Dropdown overlay={menu}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                <DownOutlined />
            </a>
        </Dropdown>
    )
}

export  default React.memo(Operation);